<template>
  <div>
    <a-spin :spinning="spinning">
      <a-descriptions
        :colon="false"
        :column="1"
        :labelStyle="{
          width: '8rem',
          alignItems: 'center',
          height: '2rem',
          color: '#939aa8',
        }"
        :contentStyle="{
          width: '100%',
          alignItems: 'center',
          height: '2rem',
          color: '#565D64',
        }"
      >
        <a-descriptions-item
          label="团队名称"
          :contentStyle="{ fontWeight: 'bolder', fontSize: '16px' }"
        >
          <a-flex v-if="isUpdatingTeamName" gap="small">
            <a-input
              ref="teamNameInputRef"
              v-model:value="newTeamName"
              @blur="confirmUpdateTeamName"
            />
            <a-button type="link" :icon="h(CheckOutlined)"></a-button>
          </a-flex>
          <template v-else>{{ teamInfo.teamName }}</template>
          <a-button
            type="link"
            :icon="h(EditOutlined)"
            @click="updatingTeamName"
            v-if="teamInfo.createByMe && !isUpdatingTeamName"
          ></a-button>
        </a-descriptions-item>
        <a-descriptions-item label="拥有者">
          {{ teamInfo.owner }}
        </a-descriptions-item>
        <a-descriptions-item label="白板总数">
          {{ teamBoardList.length }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ teamInfo.createTime }}
        </a-descriptions-item>
      </a-descriptions>
      <template v-if="teamInfo.createByMe">
        <a-divider style="margin-bottom: 40px" />
        <a-row :gutter="[0, 24]">
          <a-col :span="24">
            <span>解散团队</span>
            <span class="subTitle">（当前团队：{{ teamInfo.teamName }}）</span>
          </a-col>
          <a-col :span="24">
            <span class="subTitle">
              解散团队将永久删除团队里的所有文件，且不可恢复，请谨慎操作。
            </span>
          </a-col>
          <a-col :span="24">
            <a-popconfirm
              :title="`确定要解散「${teamInfo.teamName}」团队吗？`"
              ok-text="确定解散"
              cancel-text="取消"
              okType="danger"
              @confirm="confirmDisbandTeam"
            >
              <template #icon><WarningOutlined style="color: red" /></template>
              <a-button type="primary" danger :disabled="!teamInfo.canDisband">
                解散团队
              </a-button>
            </a-popconfirm>
          </a-col>
        </a-row>
      </template>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, h, watchEffect } from 'vue';
import { useTeamStore } from '@/store';
import { storeToRefs } from 'pinia';
import {
  CheckOutlined,
  EditOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue';
import { isEmptyString } from '@/utils/FormRules.ts';
import { message } from 'ant-design-vue';
import { router } from '@/router';

const teamStore = useTeamStore();
const { teamBoardList } = storeToRefs(teamStore);
const {
  getTeamInfo,
  getBoardListInTeam,
  updateTeamName,
  checkTeamCanDisband,
  disbandTeam,
} = teamStore;
const emits = defineEmits({
  updateTeamName: null,
});

const teamInfo = reactive({
  teamName: '',
  owner: '',
  createTime: '',
  createByMe: false,
  canDisband: false, // 判断该团队能否解散或被转移 标识
});
const spinning = ref(true);
onMounted(async () => {
  const data = await getTeamInfo();
  await getBoardListInTeam(false);
  const res = await checkTeamCanDisband();
  teamInfo.canDisband = res.data;
  setTeamInfo(data);
  spinning.value = false;
});
function setTeamInfo(data: any) {
  teamInfo.teamName = data.name;
  teamInfo.owner = data.creatorNickname;
  teamInfo.createTime = data.createTime;
  teamInfo.createByMe = data.createByMe;
}

// 修改团队名称 数据
const teamNameInputRef = ref(null);
const isUpdatingTeamName = ref(false);
const newTeamName = ref('');
watchEffect(() => {
  if (teamNameInputRef.value) {
    teamNameInputRef.value.focus();
  }
});
function updatingTeamName() {
  isUpdatingTeamName.value = true;
  newTeamName.value = teamInfo.teamName;
}
async function confirmUpdateTeamName() {
  if (newTeamName.value !== teamInfo.teamName) {
    if (isEmptyString(newTeamName.value) || newTeamName.value.length > 15) {
      message.warn('团队名称长度为1-15位 ');
      return;
    }
    await updateTeamName(newTeamName.value);
    const data = await getTeamInfo();
    teamInfo.teamName = data.name;
    emits('updateTeamName', { newName: teamInfo.teamName });
  }
  isUpdatingTeamName.value = false;
}

// 确认解散团队
async function confirmDisbandTeam() {
  await disbandTeam();
  message.info('团队已解散，正为您自动跳转至工作台');
  setTimeout(() => {
    router.push({ name: 'workbench' });
  }, 1000);
}
</script>

<style scoped lang="scss">
.subTitle {
  color: #939aa8;
}
</style>
